﻿<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>AIN BLOG —— 秘 境</title>
	<!--Main style css-->
	<link rel="stylesheet" th:href="@{/static/assets/css/style.css}">
	<!--Color css-->
	<link rel="stylesheet" th:href="@{/static/assets/css/colors/default-colors.css}">
	<!--Responsive style css-->
	<link rel="stylesheet" th:href="@{/static/assets/css/responsive.css}">
	<!-- JS -->
	<!--jQuery 1.12.4 google link-->
	<script th:src="@{/static/assets/js/jquery.min.js}"></script>
</head>
<body class="bodypadding">
	<!--快速返回顶层-->
	<div class="scroll_up gutengard_btn"><i class="icon-up-open-big"></i></div><!--END ScrollTop Btn-->
	<!--搜索框引入-->
	<div th:replace="../templates/commons/search::#main_search"></div>
	<!--侧边框引入-->
	<div th:replace="../templates/commons/floatBar::#main_floatBar"></div>
	<!--导航栏引入-->
	<div th:replace="../templates/commons/header::#main_header"></div>

	<!--Page header-->
	<div class="page_header header_image box_overlay d-flex align_items_center justify_content_center" style="background-image: url(../assets/images/photoheadbg.jpg);background-position-y: 95%;background-repeat: no-repeat;">
		<h1 class="cat_title">照 片 墙</h1>
		<div style="position: absolute;top: 60%;color: #fff;font-size: 30px;font-family: Courier New;letter-spacing: 1px;">The Photo Wall</div>

	</div><!--END Page header-->
	
	<div class="page_container_wrapper">
		<div class="container-fluid">
			<!--分类展示-->
			<div class="filter_image_btns text-center" style="width: 80%;margin: 0 auto;padding-bottom: 50px;">
				<button type="button" class="filter active all" data-group="all">全部照片</button>
				<!--分类循环开始-->
				<button type="button" class="filter" th:each="categories_name:${categoryLists}" th:data-group="${categories_name.categoryName}">[[${categories_name.categoryName}]]</button>
				<!--分类循环结束-->
			</div>
			<!--图片展示-->
			<div class="row shuffle_photos">
				<!--循环图片-->
				<div th:id="${photoAndName.articleId}" th:each="photoAndName:${photoAndCateName}" class="col-sm-4 col-md-3 no_padding shuffle_photos_item" style="width: 25%;height: 230px" data-groups=["a"]>
					<!--循环替换data-groups中的内容-->
					<script th:inline="javascript">
						var groups = [[${photoAndName.categoryName}]];
						var id = [[${photoAndName.articleId}]];
						var old = $("#" + id).attr("data-groups").replace("a", groups);
						$("#" + id).attr("data-groups", old);
					</script>
					<a style="height: 100%;width: 100%;overflow: hidden" th:href="${photoAndName.articleCover}" class="popupimg_gall hover_light">
						<img style="height: 100%" th:src="${photoAndName.articleCover}" alt="">
					</a>
				</div>
			</div>

		</div>
	</div>

	<!--引入尾部-->
	<div th:replace="../templates/commons/footer::#main_footer"></div>

	<!--Bootstrap 4.1.0-->
	<script th:src="@{/static/assets/libs/bootstrap-4.1.0/bootstrap.min.js}"></script>
	<!--jquery.magnific-popup-->
	<script th:src="@{/static/assets/libs/jquery.magnific-popup/jquery.magnific-popup.min.js}"></script>
	<!--OWL Carousel-->
	<script th:src="@{/static/assets/libs/owlcarousel2-2.3.4/owl.carousel.min.js}"></script>
	<!--Іhuffle-->
	<script th:src="@{/static/assets/libs/shuffle/shuffle.min.js}"></script>
	<!--Custom js-->
	<script th:src="@{/static/assets/js/custom.js}"></script>
	
</body>
</html>